<template>
  <div style="margin-top: 50px">
    <el-form :model="value" ref="productSaleForm" label-width="120px" style="width: 600px" size="s米糕">

      <el-form-item label="tokenId 范围：" prop="tokenIds">
        <div class="flexContent width_half">
          <el-input type="number" :disabled="true"  v-model="value.startToken"></el-input>
          ~
          <el-input type="number" v-model="value.endToken"></el-input>
        </div>
      </el-form-item>

      <el-form-item label="单独设置价格的nft：" label-width="140px" class="single-spacifical">

      </el-form-item>

      <el-form-item label="tokenId：" prop="specificalPrice">
        <el-input type="number" v-model="value.specificalTokenId"></el-input>
      </el-form-item>
      <el-form-item label="价格：" prop="specificalPrice">
        <el-input type="number" v-model="value.specificalPrice"></el-input>
      </el-form-item>
      <div>
        <el-form-item label="系列特殊设置的nft：" label-width="140px" class="single-spacifical">
        </el-form-item>
        <el-table  ref="itemTable" :data="list" v-loading="listLoading" border>
          <el-table-column type="selection" width="40" align="center"></el-table-column>
          <el-table-column label="编号" width="80" align="center">
            <template slot-scope="scope">{{ scope.row.pid }}</template>
          </el-table-column>
          <el-table-column label="tokenId" width="120" align="center">
            <template slot-scope="scope">
              <el-input type="number"  v-model="scope.row.tokenId"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="商品价格" align="center">
            <template slot-scope="scope">
              <el-input type="number"  v-model="scope.row.price"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="商品上架" width="100" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.sfsj"  :active-value="1" :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="橱窗商品" width="100" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.shopwindow" :active-value="1" :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev">上一步，填写商品信息</el-button>
        <el-button type="primary" size="medium" @click="handleNext">完成，提交商品</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { FetchProductDetails } from "../../../../../api/productdetail";
import "../../../../../assets/css/basic.css"
export default {
  name: "ProductSaleDetail",
  props: {
    value: Object,
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      //日期选择器配置
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      list:[],
      startTokenId: 0,
      endTokenId: 0,
      value1:{},
      listLoading: true
    }
  },
  created() {
  
    FetchProductDetails(this.$route.query.id, this).then(res => {
      this.$set(this.value, "endToken", res.endTokenId);
    });
  },
  computed: {

  },
  methods: {
    changeStartToken(ele) {
      this.value.startToken = ele;
      console.log(this.value.startToken);
    },

    handleEditCreated() {
      let ids = this.value.serviceIds.split(',');
      console.log('handleEditCreated', ids);
      for (let i = 0; i < ids.length; i++) {
        this.selectServiceList.push(Number(ids[i]));
      }
    },
    handleRemoveProductLadder(index, row) {
      let productLadderList = this.value.productLadderList;
      if (productLadderList.length === 1) {
        productLadderList.pop();
        productLadderList.push({
          count: 0,
          discount: 0,
          price: 0
        })
      } else {
        productLadderList.splice(index, 1);
      }
    },
    handleAddProductLadder(index, row) {
      let productLadderList = this.value.productLadderList;
      if (productLadderList.length < 3) {
        productLadderList.push({
          count: 0,
          discount: 0,
          price: 0
        })
      } else {
        this.$message({
          message: '最多只能添加三条',
          type: 'warning'
        });
      }
    },
    handleRemoveFullReduction(index, row) {
      let fullReductionList = this.value.productFullReductionList;
      if (fullReductionList.length === 1) {
        fullReductionList.pop();
        fullReductionList.push({
          fullPrice: 0,
          reducePrice: 0
        });
      } else {
        fullReductionList.splice(index, 1);
      }
    },
    handleAddFullReduction(index, row) {
      let fullReductionList = this.value.productFullReductionList;
      if (fullReductionList.length < 3) {
        fullReductionList.push({
          fullPrice: 0,
          reducePrice: 0
        });
      } else {
        this.$message({
          message: '最多只能添加三条',
          type: 'warning'
        });
      }
    },
    handlePrev() {
      this.$emit('prevStep')
    },
    handleNext() {
      this.$emit('finishCommit', this.isEdit);
    }
  }
}
</script>

<style scoped>
.littleMargin {
  margin-top: 10px;
}
</style>
